<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <script type="text/javascript" src="../../js/commonCss.js"></script>
    <link rel="stylesheet" type="text/css" href="../../styles/common.css" />
</head>
<body>
<div class="definewidth">
    <button type="button" class="btn btn-success top-back" id="backbtn">返回</button>
    <div class="div-echart ">
        <div id="main" style="width: 100%;height:500px;" class="center-block">
        </div>
    </div>
    <div id="listCon">
    </div>
</div>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/echarts.min.js"></script>

<script type="text/javascript">
    var month = getQueryString('month');
    var projectId = getQueryString('id');
    var projectName = getQueryString('projectName');
    var seriesData = [];
    $.ajax({
        type: "POST",
        url: ctx + "/salary/projectSalarySpreadInMonth",
        data:{
            month : month,
            projectId : projectId
        },
        success: function(data){
            if(data.code == 200){
                setlist('#listCon',data.data.orgArray,data.data.rows);

                //只显示前15
                var after15v = 0;
                for(var i=0;i<data.data.rows.length;i++){
                    if(i>14){
                        after15v+=data.data.rows[i].projectSalary;
                    }else{
                        seriesData[i]={
                            value:data.data.rows[i].projectSalary.toFixed(2), name:data.data.rows[i].userName
                        };
                    }
                }
                if(data.data.rows.length>15){
                    seriesData.push({value:after15v.toFixed(2), name:'其他'});
                }
                console.log(seriesData);
                setEchart('main')
            } else {
                alert(data.msg)
            }
        }
    });
    function setlist(eleid, group, obj) {
        var html = '';

        for(var i=0;i<group.length;i++){
            html += '<div class=div-list><p>'+group[i].name+'</p><table id="table'+group[i].id +'" class="table table-bordered table-hover table-striped m10"><tr><th>员工姓名</th><th width="30%">人工成本</th><th width="30%">占比</th>';
        }

        $(eleid).append(html);

        for(var i=0;i<obj.length;i++){
            var tableId = 'table' + obj[i].organizationId;
            var newRow = '<tr><td>' + obj[i].userName + '<td>' + obj[i].projectSalary.toFixed(2) +'<td>' + (obj[i].ratio*100).toFixed(2) + '%';
            $("#"+tableId+ " tr:last").after(newRow);
        }

    }
    var setEchart = function (eleId) {
        var myChart = echarts.init(document.getElementById(eleId));
        var option = {
            title : {
                text: projectName+'\n项目人工成本分布图',
                subtext: '年月：'+month,
                x:'center',
                top:15
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b}<br/>{c}元 ({d}%)"
            },
            series : [
                {
                    name: '',
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '52%'],
                    data:seriesData,
                    itemStyle:{
                        normal:{
                            label:{
                                show: true,
                                formatter: '{b} : {c} ({d}%)'
                            },
                            labelLine :{show:true}
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }

    $("#backbtn").click(function () {
        window.location.href = "list.html";
    });
</script>
</body>
</html>